<template>
    <!-- 其他登录方式 -->
    <main class="other-login">
        <aside class="phone_login">
            <div class="center">
                <img src="../../assets/img/platform.png" alt />
            </div>
        </aside>

        <!-- 输入信息 -->
        <div class="info" >

            <!-- 手机号登录 -->
            <div class="phone">
                <p class="title">手机号登录</p>
                <p>
                    <el-input
                        v-model="phoneLogin.phone"
                        placeholder="请输入手机号"
                        :input-style="inputHeight"
                    />
                </p>
                <p class="check" v-show="phoneLogin.toggle">
                    <el-input
                        v-model="phoneLogin.checkCode"
                        placeholder="请输入验证码"
                        :input-style="inputHeight"
                    />
                    <span @click="phoneLogin.sendCheckCode"><el-button :disabled="phoneLogin.disabled" type="primary" size="small" ref="checkCodeBtnRef">获取验证码</el-button></span>
                </p>
                <p v-show="!phoneLogin.toggle">
                    <el-input
                        v-model="phoneLogin.password"
                        placeholder="请输入密码"
                        type="password"
                        :input-style="inputHeight"
                    />
                </p>
                <p><span class="password-login" v-show="phoneLogin.toggle" @click="phoneLogin.toggleLoginMode">密码登录</span></p>
                <p><span class="password-login" v-show="!phoneLogin.toggle" @click="phoneLogin.toggleLoginMode">验证码登录</span></p>
                <p class="login" @click="phoneLogin.login">
                    <el-button type="primary" size="small">登录</el-button>
                </p>
            </div>


        </div>

        <div class="agreement">
            <input type="checkbox" v-model="store.state.login_agreement" />
            <span>同意</span>
            <a href="https://st.music.163.com/official-terms/service">《服务条款》</a>
            <a href="https://st.music.163.com/official-terms/privacy">《隐私政策》</a>
            <a href="https://st.music.163.com/official-terms/children">《儿童隐私政策》</a>
        </div>
        <div class="return-qr-login" @click="qrLogin"></div>
    </main>
</template>

<script setup>
import { reactive, getCurrentInstance, inject, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const store = useStore();
const router = useRouter();
const axios = getCurrentInstance().proxy.$http;
const emitter = inject('emitter');
function qrLogin() {
    if (store.state.login_agreement) {
        store.commit('CHANGE_LOGIN_MODE', true);
    } else {
        ElMessage({
            message: '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》',
            type: 'warning'
        })
    }
}





// 手机号登录
let phone = ref(true);
const phoneLoginMode = () => {
    phone.value = true;
    email.value = false;
    register.value = false;
    console.log('phone')
}
let inputHeight = { height: '33px', width: '100%' }
class PhoneLogin {
    constructor() {
        this.toggle = true;
        this.phone = null;
        this.checkCode = null;
        this.password = null;
        this.countDown = 60;
        this.disabled=false;
        this.timeId;
        this.clearId;
    }
    toggleLoginMode() {
        this.toggle = !this.toggle;
        this.checkCode = null;
        this.password = null;
    }

    async sendCheckCode() {
        if(this.disabled) return
        if(this.clearId) clearTimeout(this.clearId);
        if(!this.phone) return ElMessage({ message: '请输入手机号', type: 'warning' })
        this.disabled = true;
        await axios.get(`/captcha/sent?phone=${this.phone}`)
        this.clearId = setTimeout(() => {
            this.disabled = false;
        }, 30000)
    }
    async checkCodeLogin() {
        if(this.phone && this.checkCode) {
            try{
                const { data } = await axios.get(`/captcha/verify?phone=${this.phone}&captcha=${this.checkCode}`)
                if(data.data) {
                    // 手机号和验证码正确登录
                    this.passwordLogin()
                }
            }catch(err) {
                console.log(err)
            }

        } else {
            ElMessage({ 
                message: '请输入完整信息在登录',
                type: 'warning'
            })
        }
    }
    async passwordLogin() { 
        if(this.phone) {
            try{
                const { data } = await axios.get('/login/cellphone', {
                    params: {
                        phone: this.phone,
                        password: this.password,
                        captcha: this.checkCode
                    }
                })
                if(data.code === 200) {
                    localStorage.setItem('token', data.token);
                    emitter.emit('getLoginStatus', true)
                    router.push({ name: 'recommend' })
                } else {
                    ElMessage({ type: 'warning', message: '手机号或密码错误' })
                }
            } catch(err) {
                ElMessage({ type: 'warning', message: '验证码错误' })
                console.log(err);
            }
        } else {
            ElMessage({ type: 'warning', message: '请输入完整信息在登录' })
        }
    }
    login() {
        if (store.state.login_agreement) {
            if(this.toggle) {
                this.checkCodeLogin();
            } else {
                this.passwordLogin();
            }
        } else {
            ElMessage({
                message: '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》',
                type: 'warning'
            })
        }
    }
}
let phoneLogin = reactive(new PhoneLogin());


</script>

<style lang='less' scoped>
// 其他方式登录
.other-login {
    flex-grow: 1;
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    aside {
        .center {
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img {
                width: 180px;
                height: 100px;
                margin-top: 20px;
            }
        }
    }
    .info {
        height: 80%;
        padding: 20px;
        // 手机号登录样式
        .phone {
            p {
                margin-top: 15px;
            }
            .title{
                text-align: center;
                font-size: 20px;
                margin-top: 0px;
                font-weight: 600;
            }
            .check {
                display: flex;
                justify-content: space-between;
                .el-input {
                    width: 55%;
                }
            }

            .password-login {
                font-size: 10px;
                user-select: none;
                color: #555;
                &:hover {
                    text-decoration: underline;
                    cursor: pointer;
                }
            }

            .login {
                .el-button {
                    width: 100%;
                }
            }
        }

        // 邮箱登录
        .email{
            margin-top: 50px;
            p{
                margin-top: 20px;
                &:last-child{
                    .el-button{
                        width: 100%;
                    }
                }
            }
        }
    }

    .agreement {
        height: 30px;
        line-height: 30px;
        position: absolute;
        left: 30px;
        bottom: 20px;
        font-size: 12px;
        input {
            position: absolute;
            left: -15px;
            top: 8px;
        }
        a {
            color: #507daf;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    .return-qr-login {
        width: 52px;
        height: 52px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        background: url(../../assets/img/qr_login_icon.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
    }
}
</style>